Cocos2d-html5 是一個用來開發網頁2D遊戲的遊戲引擎，是 Cocos2d 家族的其中一個分支，利用 Cocos2d-html5 來開發遊戲可以讓開發者專注在遊戲本體的設計上。
Cocos2d-html5 是一個用來開發網頁2D遊戲的遊戲引擎，以JavaScript寫成，是 Cocos2d 家族的其中一個分支。在這個網站有更多的介紹與官方遊戲範例：
http://igdshare.org/content/cocos2d_html5

下面我簡單示範如何使用 sprite sheet 在網頁繪製動畫。內容大多是我自己網路摸索的，如有錯誤還請告知。

首先是 sprite sheet 的圖檔，來自一個叫做 BrowserQuest 的遊戲
每一行都代表一個動作，而列是代表的是分解動作
藉由改變顯示出來的圖案就能讓人產生動畫的錯覺

另外在 Cocos2d-html5 中要使用 sprite sheet 還需要一個以 xml 寫成的 plist 檔案
用來定義 sprite sheet 被顯示的位置跟大小跟他的名字
內容大概是長這樣子：

<key>goblin_atk_right_0</key>
<dict>
    <key>x</key>
    <integer>0</integer>
    <key>y</key>
    <integer>0</integer>
    <key>width</key>
    <integer>52</integer>
    <key>height</key>
    <integer>52</integer>
    <key>offsetX</key>
    <integer>0</integer>
    <key>offsetY</key>
    <integer>0</integer>
    <key>originalWidth</key>
    <integer>52</integer>
    <key>originalHeight</key>
    <integer>52</integer>
</dict>

以上內容定義了一個叫做 goblin_atk_right_0 的 sprite
座標原點在左上角
這個 sprite 只顯示 sprite sheet(0, 0)到(52, 52)這個範圍的像素
zwoptex 或 TexturePacker 可以幫你輸出這種檔案，但目前我是用手刻的XD

接下來就是遊戲邏輯的部份
其中 s_goblinPlist 是 Plist 檔案的路徑，s_goblint 是圖檔的路徑
將檔案放到cache中，方便之後調用。

var cache = cc.SpriteFrameCache.getInstance()
cache.addSpriteFrames(s_goblinPlist, s_goblin);

建立一個 Sprite

var enemy = cc.Sprite.createWithSpriteFrameName("goblin_idle_right_0");
enemy.setPosition(cc.p(150, 100));
enemy.setScale(1.5);
this.addChild(enemy);

在Cocos2d-html5中 Sprite 有很多可以執行的動作
組合這些動作來讓 Sprite 執行

//在三秒中移動到相對位置(200, 30)。
var move = cc.MoveBy.create(3, cc.p(200, 30))

//每0.2秒換顯示的影像，形成一個走動的動畫。
var walkAnimate = cc.Animate.create(cc.Animation.create([
    cache.getSpriteFrame("goblin_walk_right_0"),
    cache.getSpriteFrame("goblin_walk_right_1"),
    cache.getSpriteFrame("goblin_walk_right_2")], 0.2));

//重複走動的動畫5次。
var walkRepeat = cc.Repeat.create(walkAnimate, 5);

//同時移動並播放走動的動畫。
var walk = cc.Spawn.create(move, walkRepeat)

//建立攻擊的動畫
var atk = cc.Animate.create(cc.Animation.create([
    cache.getSpriteFrame("goblin_atk_right_0"),
    cache.getSpriteFrame("goblin_atk_right_1"),
    cache.getSpriteFrame("goblin_atk_right_2")], 0.2));

//依序執行walk, atk, atk, walk。
var action = cc.Sequence.create(walk, atk, atk, walk)
        
enemy.runAction(action)

程式碼執行的成果：
https://dl.dropboxusercontent.com/u/10533972/ithelp/index.html
看，很簡單吧~

才怪w
我認為這部份遊戲引擎應該可以包裝得再好一些
不過也有可能是我使用的方法有錯

最後附上一個兩年多前沒使用引擎的舊程式做參考
可以右鍵看原始碼
https://dl.dropboxusercontent.com/u/10533972/ithelp/%E6%9D%B1%E6%96%B9%E6%B7%AB%E7%8D%B8%E8%A1%8C%28B%29.html